<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>草稿箱</title>
    <link rel="stylesheet" href="css/conmmon.css">
    <link rel="stylesheet" href="css/blog_list.css">
    <!-- 引入 jquery -->
    <script src="js/jquery.min.js"></script>
    <script src="js/commom.js"></script>

    
    <link href="https://cdn.bootcss.com/highlight.js/9.18.1/styles/atom-one-dark.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/marked/0.8.1/marked.min.js"></script>
    <script src="https://cdn.bootcss.com/highlight.js/9.18.1/highlight.min.js"></script>

</head>

<body>
    <!-- 导航栏 -->
    <div class="nav">
        <img src="img/博客系统logo.jpg" alt="">
        <span class="title">我的博客系统</span>
        <!-- 用来占据中间位置 -->
        <span class="spacer"></span>
        <a href="blog_list.html">主页</a>
        <a href="blog_add.html">写博客</a>
        <a href="javascript:logout()">退出</a>
        <!-- <a href="#">注销</a> -->
    </div>
    <!-- 版心 -->
    <div class="container">
        <!-- 左侧个人信息 -->
        <div class="container-left">
            <div class="card">
                <img src="" class="avtar" alt="" id="photo">
                <h4 id="nickname"></h4><br>
                <!-- <a href="/upd_password.html" id="draft1">修改密码</a> -->
                <div class="counter">
                    <a href="myblog_list.html" id="draft2">文章</a>
                    <a href="mycollect_list.html" id="draft3">收藏</a>
                </div>
                <div class="counter">
                    <span id="artCount"></span>
                    <span id="draftCount"></span>
                </div>
            </div>
        </div>
        
        <!-- 右侧内容详情 -->
        <div class="container-right" id="artDiv">
            <!-- 每一篇博客包含标题, 摘要, 时间 -->
            <div class="blog">
                <div class="title"></div>
                <div class="date"></div>
                <div class="desc">
                    
                </div>
                <a href="#" class="detail"> &gt;&gt;</a> &nbsp;&nbsp;
                <a href="#" class="detail"> &gt;&gt;</a>&nbsp;&nbsp;
                <a href="#" class="detail"> &gt;&gt;</a>
            </div>
        </div>
        
    </div>
    <script>
        // 获取左侧个人信息
        function showInfo() {
            jQuery.ajax({
                url: "/user/showinfo",
                type: "POST",
                data: {},
                success: function(result) {
                    if (result != null && result.code === 200 && result.data.id > 0) {
                        // 加载用户信息 --> 用户名和文章数.
                        // 给上述的 id=username 的 h3 标签赋值.
                        jQuery("#nickname").text(result.data.nickname);
                        // 给上述的 id=artCount 的 span 标签赋值.
                        jQuery("#artCount").text(result.data.artCount);
                        jQuery("#draftCount").text(result.data.draftCount);
                        $("#photo").attr("src","http://localhost:8082" + result.data.photo);
                        // $("#photo").attr("src","http://43.143.87.64:8082" + result.data.photo);
                    } else {
                        alert("个人信息加载失败, 请再次刷新!");
                    }
                }
            });
        }
        // 调用方法.
        showInfo();

       // 获取文章草稿列表数据
       function draft() {
            jQuery.ajax({
                url: "/art/mydraftlist",
                type: "POST",
                data: {}, // 一定不要传参!!
                success: function(result) {
                    if (result != null && result.code === 200) {
                        // 查询成功, 有两种情况: 1. 发布过草稿文章. 2. 从未发布过草稿文章.
                        if (result.data != null && result.data.length > 0) {
                            // 用户发布过文章草稿 
                            var artListDiv = "";
                            for (var i = 0; i < result.data.length; i++) {
                                // 循环文章集合拿到每一篇文章
                                var artItrm = result.data[i];
                                // 进行拼接内容
                                artListDiv += '<div class="blog">';
                                artListDiv += '<div class="title">' +artItrm.title+'</div>';
                                artListDiv += '<div class="date">' +artItrm.updatetime+'</div>';
                                artListDiv += '<div class="desc">';
                                artListDiv += artItrm.content; 
                                artListDiv += '</div>';
                                artListDiv += '<a href="draft_content.html?id=' +artItrm.id
                                        +'" class="detail">查看全文 &gt;&gt;</a> &nbsp;&nbsp;';
                                artListDiv += '<a href="blog_edit.html?id=' +artItrm.id
                                        +'" class="detail">修改文章 &gt;&gt;</a> &nbsp;&nbsp;';
                                artListDiv += '<a href="javascript:myDel(' + artItrm.id
                                            +')" class="detail">删除文章 &gt;&gt;</a>';
                                artListDiv += '</div>';
                            }
                            jQuery("#artDiv").html(artListDiv);
                        } else {
                            // 用户从未发布过文章草稿
                            jQuery("#artDiv").html('<h3 style="text-align: center">您的草稿箱空空如也~</h3>');
                        } // 
                    } else {
                        // 查询失败
                        alert("页面加载失败!请重试!")
                    }
                }
            });
        }
        draft();

    </script>
</body>

</html>